<template>
  <div>
    <ul class="top-box">
      <li :class="{ active: currentType == 1 }" @click="handleView(1)">发送通知</li>
      <li :class="{ active: currentType == 2 }" @click="handleView(2)">查看通知</li>
    </ul>
    <div class="contentBox">
      <div class="filterbox">
        <!-- v-model="keyword" -->
        <el-checkbox v-if="currentType == 2" v-model="checked1" label="已收藏" size="large" />
        <el-input
          placeholder="请输入通知标题"
          style="width: 300px; margin: 0 2px 0 10px"
          @keyup.enter="search"
        />
        <el-button type="primary" style="margin-left: 4px" @click="search"> 查询 </el-button>
        <!-- <el-button>重置</el-button> -->
      </div>

      <el-button
        v-if="currentType == 1"
        type="success"
        icon="el-icon-circle-plus"
        @click="onAddArticle"
        >新增</el-button
      >
      <el-table
        v-if="currentType == 1"
        v-loading="loading"
        :data="articleList"
        style="margin-top: 12px"
        stripe
        :header-cell-style="headerStyle"
      >
        <el-table-column type="index" width="100" align="center" label="序号" />
        <el-table-column label="状态" prop="zhuangtai">
          <template #default="{ row }">
            <img v-if="row.zhuangtai == '已撤回'" class="btn-icon" src="@/assets/alarm_back.png" />
            <!-- @click="close" -->
            <img v-if="row.zhuangtai == '已发送'" src="@/assets/success.png" class="btn-icon" />
            {{ row.zhuangtai }}
          </template>
        </el-table-column>
        <el-table-column label="通知标题" prop="title">
          <template #default="{ row }">
            <el-link type="primary" underline="never" @click="detailDoc(row)">{{
              row.title
            }}</el-link>
          </template>
        </el-table-column>

        <el-table-column label="发布科室" prop="keshi"></el-table-column>
        <el-table-column label="发布人" prop="person"></el-table-column>
        <el-table-column label="发布时间" prop="pub_date">
          <template #default="{ row }">
            {{ row.pub_date }}
          </template>
        </el-table-column>

        <!-- 利用作用域插槽 row 可以获取当前行的数据 => v-for 遍历 item -->
        <el-table-column width="180" label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary" v-if="row.zhuangtai == '已撤回'" link @click="see(row)">
              编辑
            </el-button>
            <el-button type="danger" link @click="batchDelComment(row)"> 删除 </el-button>
            <el-button v-if="row.zhuangtai == '已发送'" link type="primary" @click="see(row)">
              撤回消息
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-table
        v-if="currentType == 2"
        v-loading="loading"
        :data="articleList"
        style="margin-top: 12px"
        stripe
        :header-cell-style="headerStyle"
      >
        <el-table-column label="通知标题" prop="title">
          <template #default="{ row }">
            <el-link type="primary" underline="never" @click="detailDoc(row)">{{
              row.title
            }}</el-link>
          </template>
        </el-table-column>

        <el-table-column label="发布科室" prop="keshi"></el-table-column>
        <!-- <el-table-column label="发布人" prop="person"></el-table-column> -->
        <el-table-column label="发布时间" prop="pub_date">
          <template #default="{ row }">
            {{ row.pub_date }}
          </template>
        </el-table-column>
        <el-table-column label="收藏标志" prop="pub_date" align="center">
          <template #default="{ row }"
            ><i v-if="row.collect" class="el-icon-star-on"></i>
            <i v-else class="el-icon-star-off"></i>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 20px 0; text-align: center">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 15, 20, 25, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog v-model="dialogVisible" title="新增" width="70%" :close-on-click-modal="false">
        <el-form ref="ruleFormRef" :model="formData" label-width="80px" :rules="rules">
          <el-form-item label="消息标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <!--  富文本编辑器 -->
          <el-form-item label="">
            <div class="editor">
              <QuillEditor
                :options="editorOption"
                style="height: 300px"
                ref="editorRef"
                theme="snow"
                v-model:content="content"
                contentType="html"
              ></QuillEditor>
            </div>
          </el-form-item>

          <div class="boxBottom">
            <el-button
              type="primary"
              style="margin-left: 70px"
              @click="submitContent('ruleFormRef')"
              >发布</el-button
            >
            <el-button type="primary" plain @click="submitContent">暂存草稿</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </div>
        </el-form>
      </el-dialog>

      <el-dialog v-model="dialogDetail" title="通知详情" width="70%" :close-on-click-modal="false">
        <div>
          <p class="titBox">
            <b>{{ detailData.title }}</b>
          </p>
          <div class="titBox gray">
            {{ detailData.keshi }}
            <span style="margin-left: 6px">
              {{ detailData.pub_date }}
            </span>
          </div>
          <div class="neirong">
            各科室、患者家属及探视人员：
            为进一步规范重症监护室（ICU）探视管理，保障患者安全与医疗秩序，结合当前疫情防控要求及医院实际情况，现对探视时间及流程调整如下：

            <p>
              一、探视时间调整 常规探视时段
              每日下午15:30-16:00（综合ICU及呼吸重症监护室RICU统一执行）。
              非固定时段探视仅限以下情况： 患者病情危急需紧急沟通（需主治医生审批）。
              特殊医疗操作后需家属配合（如术后告知）。 疫情防控期间补充规定 探视人员需提供
              48小时内核酸检测阴性证明 及 健康码绿码。
              发热（≥37.3℃）、呼吸道症状或近期接触传染病患者者禁止探视。
            </p>
            <p>
              二、探视流程调整 预约与登记 家属需通过 医院公众号或电话 提前预约探视时段。 探视当日持
              患者住院号、身份证原件 至ICU护士站登记，签署《探视承诺书》。 防护准备 进入前需完成
              手部消毒，穿戴医院提供的 医用口罩、隔离衣、鞋套及帽子。
              禁止携带手机、相机等电子设备，确需使用需经护士长审批。 探视行为规范 每次探视
              限1人（非疫情期间可放宽至2人），12岁以下儿童不得进入。 探视期间
              禁止触碰医疗设备、患者伤口或导管，保持安静，探视时间 严格控制在15分钟内。
            </p>
            <p>
              三、违规处理 未预约、超时或未遵守防护规定者，首次予以警告；情节严重者
              取消当月探视资格。 擅自拍摄患者影像或泄露隐私者，将依法追究责任。 四、其他说明
              紧急联络：家属需确保联系方式24小时畅通，以便医护人员及时通知病情变化。
              物品交接：患者生活用品需经护士消毒后转交，食品类需主治医生审批。
              特殊情况：如遇抢救或设备维护，探视将暂停并另行通知。
              本通知自2025年6月1日起执行，原有规定与本通知冲突的以本通知为准。 特此通知。
              医院重症医学科
            </p>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script >
import { ref } from 'vue'
import {
  // computed,
  defineComponent,
  // onMounted,
  reactive,
  toRefs,
} from 'vue'

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default defineComponent({
  components: { QuillEditor },
  setup() {
    // const store = getStoreFromInstance()
    const editorRef = ref()
    const state = reactive({
      checked1: false,
      rules: {
        title: [{ required: false, type: 'string', message: '请输入消息标题' }],
      },
      headerStyle: {
        background: '#F9F9F9',
        padding: '18px 0',
        // textAlign: 'center'
      },
      dialogVisible: false,
      dialogDetail: false,
      detailData: {},
      formData: {
        title: '',
      },
      page: 1,
      size: 20,
      total: 4,
      currentType: 1,
      search: {
        startTime: '', //开始时间
        endTime: '', //结束时间
        key: '',
      },
      loading: false,
      articleList: [
        {
          title: '重症监护室探视时间及流程调整通知',
          pub_date: '2025-05-15 19:25',
          person: '系统管理员',
          keshi: '信息设备科',
          zhuangtai: '已发送',
          collect: true,
        },
        {
          title: '血流动力学监测技术竞赛结果通报',
          pub_date: '2025-05-15 19:25',
          person: 'icu-001',
          keshi: '信息设备科',
          zhuangtai: '已撤回',
          collect: true,
        },
        {
          title: '信息系统故障期间纸质记录规范',
          pub_date: '2025-05-15 19:25',
          person: '系统管理员',
          keshi: '信息设备科',
          zhuangtai: '已发送',
          collect: false,
        },
      ],
      content: '',
      editorOption: {
        placeholder: '请输入内容...',
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ['clean'],
            ['link', 'image'], // 链接、图片
          ],
        },
      },
      report: [],
      navIndex: 0,
    })
    const articleEditRef = ref()

    function handleView(type) {
      if (state.currentType == type) {
        return
      }
      state.navIndex = 0
      state.currentType = type
    }
    // 添加逻辑
    const onAddArticle = () => {
      state.dialogVisible = true
    }
    function handleSizeChange(size) {
      state.size = size
    }
    function handleCurrentChange(page) {
      state.page = page
    }
    function submitContent() {
      console.log('提交的内容：', state.content)
    }
    function detailDoc(row) {
      state.detailData = row
      state.dialogDetail = true
    }

    return {
       editorRef,
      articleEditRef,
      ...toRefs(state),
      handleSizeChange,
      handleCurrentChange,
      submitContent,
      detailDoc,
      handleView,
      onAddArticle,
    }
  },
})
</script>

<style lang="scss" scoped>
.el-icon-star-on {
  cursor: pointer;
  font-size: 24px;
}

.el-icon-star-off {
  cursor: pointer;
  font-size: 20px;
}

.titBox {
  text-align: center;
}

.neirong {
  padding: 12px 14px;
  font-size: 16px;
  line-height: 28px;
  text-indent: 2em;
  word-break: break-word;
  background-color: #f3f3f3;
  margin-top: 12px;
}

.gray {
  color: #b1b3b6;
}

.boxBottom {
  padding-top: 12px;
}

.filterbox {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 0 2px;
}

.btn-icon {
  margin-right: 5px;
  width: 18px;
  vertical-align: sub;
}

ul.top-box {
  margin-right: 10px;
  display: flex;
  align-items: center;
  list-style: none;
  height: 55px;
  padding: 2px 20px;
  border-bottom: 1px solid #f2f4f5;
  box-sizing: border-box;
  background: #fff;
  border-radius: 6px 6px 0 0;

  li {
    color: #909399;
    font-size: 14px;
    transition: 0.2s ease;
    cursor: pointer;

    &.active {
      position: relative;
      font-size: 16px;
      font-weight: 600;
      color: #303133;

      &::after {
        content: '';
        position: absolute;
        bottom: -11px;
        left: 50%;
        width: 30px;
        height: 3px;
        border-radius: 1.5px;
        background: #156ff4;
        transform: translateX(-50%);
      }
    }

    & + li {
      margin-left: 30px;
    }
  }
}

.contentBox {
  margin-top: 12px;
  padding: 12px;
  background-color: #fff;
}

::v-deep {
  // .report-list {
  //   .el-table:before {
  //     opacity: 0;
  //   }
  // }
  .el-input.flex-1 {
    .el-input__inner {
      border-color: #e3e3e3;
      border-radius: 0;
    }
  }
}

.pt-12 {
  padding-top: 12px;
}

.b-t-grey {
  border-top: 1px solid #e5e5e5;
}

.f-b {
  font-weight: bold !important;
}
</style>
